<route lang="yaml">
meta:
  requiresAuth: true
</route>

<template>
  <el-table :data="addresslist" style="width: 100%">
    <el-table-column prop="address" label="地址" width="180" />
    <el-table-column prop="recipient" label="收货人" width="180" />
    <el-table-column prop="remark" label="备注" />
    <el-table-column label="Operations" width="150">
      <template #default="scope">
        <el-button @click="deleteitem(scope.row.id)" size="small"> 删除 </el-button>
        <el-button @click="edit(scope.row.id)" size="small"> 编辑 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="dialogVisible = true" v-if="!dialogVisible">添加地址</el-button>
  <el-form v-if="dialogVisible">
    <el-form-item label="收件人">
      <el-input v-model="addressform.recipient"></el-input>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="addressform.contact"></el-input>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="addressform.address"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="addressform.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="add">添加</el-button>
      <el-button @click="dialogVisible = false">返回</el-button>
    </el-form-item>
  </el-form>
  <el-form v-if="editdialogVisible">
    <el-form-item label="收件人">
      <el-input v-model="addressform.recipient"></el-input>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="addressform.contact"></el-input>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="addressform.address"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="addressform.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="editres">提交</el-button>
      <el-button @click="editdialogVisible = false">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getAddress, addAddress ,editAddress ,deleteAddress} from '../../services/auth'

const addresslist = ref()
const dialogVisible = ref<boolean>(false)
const editdialogVisible = ref<boolean>(false)
const addressform = ref({ recipient: '', contact: '', address: '', remark: '' })
onMounted(async () => {
  try {
    addresslist.value = (await getAddress()).data
  } catch (err) {}
})
async function add() {
  await addAddress(addressform.value)
  addressform.value = { recipient: '', contact: '', address: '', remark: '' }
  addresslist.value = (await getAddress()).data
  dialogVisible.value = false
}
async function deleteitem(id:string) {
  await deleteAddress(id)
  addresslist.value = (await getAddress()).data
}
const idr = ref('')
function edit(id:string) {
  editdialogVisible.value = true
  idr.value = id
}
async function editres() {
  await editAddress(idr.value,addressform.value)
  addressform.value = { recipient: '', contact: '', address: '', remark: '' }
  addresslist.value = (await getAddress()).data
  idr.value = ''
  editdialogVisible.value = false
}
</script>
